<template>
    <div class="flex jc-sb mt-10">
        <div class="w50p fg1 brs bg-fff pl-10 pr-10 pt-10 pb-5 bs">
            <div class="flex aic jc-sb">
                <p class="fwb fa5 mt-10">Histroy Quotation</p>
                <el-select v-model="value" class="w20p mt-5" placeholder="Select">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <el-table :data="leftList" height="32vh" style="width: 100%">
                <el-table-column type="expand">
                    <template #default="props">
                        <div>
                            <el-table :data="props.row.item" border>
                                <el-table-column align="center" prop="Qty" label="Qty" />
                                <el-table-column align="center" prop="purchaser.quotation_price" label="PRICE" />
                                <el-table-column align="center" prop="purchaser.profit_rate" label="Profit" />
                                <el-table-column align="center" prop="purchaser.purchase_price" label="COST" />
                                <el-table-column align="center" label="LEADING">
                                    <template v-slot="leading">
                                        <el-select v-model="leading.row.purchaser.leadingtime" filterable disabled
                                            placeholder="Select">
                                            <el-option v-for="item in newLeading" :key="item.label" :label="item.label"
                                                :value="item.case" />
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column align="center" prop="sta" label="STA" /> -->
                            </el-table>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="inquiry_id" align="center" label="RFQ ID" min-width="140" />
                <el-table-column prop="country.name" align="center" label="CNTY" />
                <el-table-column prop="items_count" align="center" label="ITEMS" />
                <el-table-column prop="customer.Customer_type" align="center" label="SUPPLIER" min-width="90" />
                <el-table-column prop="state" align="center" label="STA" />
            </el-table>
        </div>
        <div class="w40p brs bg-fff pt-10 pl-10 pr-10 ml-10 bs">
            <el-table :data="rightList" height="35.8vh" stripe style="width: 100%">
                <el-table-column prop="product.model" label="RFQ LIST" width="150" />
                <el-table-column prop="price" />
                <el-table-column prop="leadingtime" />
                <el-table-column prop="product_condition" />
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import * as $axios from '../../../api/index'
import { useDemoStore } from '../../../pinia/index'
const store = useDemoStore()

const props = defineProps({
    product_id: String,
    newLeading: Array
})

// 历史报价
const leftList = ref([])
const leftData = () => {
    const data = {
        token: store.token,
        product_id: props.product_id
    }
    $axios.$orderGet_inquiry_list_by_product(data).then(res => {
        leftList.value = res.data.data
        // console.log(res.data.data)
    })
}

// 历史订单
const rightList =ref([])
const rightData = ()=>{
    const data = {
        token: store.token,
        product_id: props.product_id
    }
    $axios.$orderHistory_order(data).then(res => {
        res.data.data.forEach(item=>{
            item.leadingtime = item.leadingtime||'NO',
            item.product_condition = item.product_condition || 'NO'
        })
        rightList.value = res.data.data
        console.log(res.data.data)
    })
}

watch(props, () => {
    leftData(),
    rightData()
})
</script>

<style lang="less">
.brs{
    border-radius: 10px;
}
</style>
